<template>
    <div class="my">
        <header>
            <h3>我 的</h3>
        </header>
        <div class="box_title">
                <dl>
                    <dt>
                        <span> <img :src="avatarUrl ? avatarUrl :''" alt=""> </span>
                    </dt>
                    <dd>
                        <p> {{ username ?username:"" }}
                                <van-icon name="envelop-o" info="9" class="news" size="40rpx"/>
                        </p>
                        <p> 手机号</p>
                    </dd>
                </dl>
                <div>
                   <navigator url="/pages/my/index2" >
                        <img src="@/static/one.png" alt="">
                      <p>我的发布</p>
                   </navigator>  
                   <navigator url="/pages/my/index2" >
                        <img src="@/static/two.png" alt="">
                        <p>收藏</p>
                   </navigator>
                   <navigator url="/pages/my/index2" >
                        <img src="@/static/three.png" alt="">
                        <p>浏览历史</p>
                   </navigator>
                </div>
            </div>
        <main>
           <navigator>支付明细 <span>></span></navigator>
           <navigator>问题反馈 <span>></span></navigator>
           <navigator>联系客服 <span>></span></navigator>
        </main>

        <button class="quit" @click="exit">退出登录</button>
    </div>
</template>
<script>
export default {
  data() {
    return {
      list: [1, 2, 3, 4, 5],
      username:"",
      avatarUrl:""
    };
  },
  onLoad() {
      this.avatarUrl=wx.getStorageSync('avatarUrl')
      this.username=wx.getStorageSync('username')
  },
  async onShow() {  
  },
  methods: {
      exit(){
            wx.setStorageSync('username','')
            wx.setStorageSync('avatarUrl','')
            wx.navigateBack()
            wx.navigateTo({
                url:""
            })
      }
  },
  created() {
        console.log(this.$store);
  },
};
</script>




<style scoped lang='scss'>
.my{
    font-size: 30rpx;
}
/* 头部 */
header{
    width: 100%;
    height: 400rpx;
    position: absolute;
    left: 0px;
    top: 0px;
    background: -webkit-linear-gradient( 315deg, rgba(2, 114, 240, 1) 0%, rgba(2, 114, 240, 1) 0%, rgba(57, 165, 255, 1) 100%, rgba(57, 165, 255, 1) 100%);
    position: relative;
}
h3{
    padding-top: 70rpx;
    text-align: center;
    color: #fff;
}
/* 弧度 */
header:after{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -100rpx;
    content: '';
    z-index: 1;
    height: 200rpx;
    width: 100%;
    border-radius:50%;
    background: #fff;
}
.box_title{
    position: absolute;
    top: 150rpx;
    margin-left:40rpx ;
    background: #fff;
    width: 85%;
    border: 1px solid #ccc;
    z-index: 10;
    padding: 20rpx;
    box-shadow: 0 5rpx 5px rgb(121, 118, 118);
    border-radius: 5%;
    height: 300rpx;
}
.box_title dl{
    border-bottom: 7rpx solid rgb(247,247,247);
    display: flex;
    align-content: center;
    padding-bottom: 20rpx;
}
.box_title dl dt{
    width: 100rpx;
    height: 100rpx;
    background: pink;
    margin-right: 20rpx;
    border-radius: 50%;
    margin-top: 30rpx;
    img{
        width: 100%;
        height:100%;
    }
}
.box_title dl dd p:first-child{
    display: flex;
    align-content: center;
}
.box_title dl dd navigator .news{
    color: #2a94fa; 
    margin: 5rpx 0 0 200rpx;
}
.box_title dl dd{
    margin-top: 30rpx;
}
.box_title dl dd p{
    line-height: 50rpx;
}
.box_title>div{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.box_title>div>navigator{
    text-align: center;
}
.box_title>div>navigator>img{
    margin-top: 30rpx;
    width: 70rpx;
    height: 70rpx;
}

main{
    /* background: yellow; */
    margin-top: 100rpx;
}
main>navigator{
    border-bottom: 15rpx solid rgb(245,247,246);
    line-height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 80rpx;
}
.quit{
    width:90%;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 150rpx;
    font-size: 30rpx;
    color: #fff;
    background: rgba(255, 101, 111, 1);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20rpx;
    margin: auto;
    box-shadow: 2rpx 3rpx 6rpx rgba(255, 101, 111, 1) ;
}
</style>